.keyboard-help {
  @extend %flex-column;

  > div {
    padding: 0 !important;
  }

  h2 {
    margin: 0.5em 0 0 0;
  }

  .scrollable {
    overflow-y: auto;
    padding: 0.8em 0;
  }

  table {
    width: 100%;
  }

  th p {
    margin: 1.2em 0 0.6em 0;
    background: $c-brag;
    color: $c-brag-over;
    font-weight: bold;
    padding: 0.3em 0;
  }

  td {
    padding: 0.2em 0.5em;
    text-align: left;
  }

  .keys {
    padding-right: 1em;
    text-align: right;
    white-space: nowrap;
  }

  .desc:first-letter {
    text-transform: uppercase;
  }

  or {
    margin-left: 0.2em;
    opacity: 0.5;
  }

  kbd {
    display: inline-block;
    padding: 4px 5px;
    margin-left: 3px;
    font-family: monospace;
    line-height: 10px;
    color: #444;
    vertical-align: middle;
    background-color: #fcfcfc;
    border: solid 1px #ccc;
    border-bottom-color: #bbb;
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 #bbb;
  }

  td.mouse li {
    list-style: disc inside;
    margin-left: 1em;
  }
}
